<!--
  Copyright 2012-2019 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div ng-include src="'template/gt-http-error-overlay.html'"></div>
<div style="height: 30px;"></div>
<div class="gt-chart-controls float-right">
  <button class="gt-chart-button"
          ng-click="zoomOut()">
        <span title="Zoom out"
              class="fas fa-search-minus">
        </span>
  </button>
  <button class="gt-chart-button"
          ng-click="refresh()">
        <span title="Refresh"
              class="fas fa-sync">
        </span>
  </button>
  <button class="gt-chart-button"
          uib-popover-template="'template/help/traces-chart.html'"
          popover-placement="left"
          popover-trigger="'outsideClick'">
        <span title="Help"
              class="fas fa-question-circle">
        </span>
  </button>
</div>
<div class="gt-chart-container">
  <div gt-spinner
       gt-show="showChartSpinner"
       gt-no-delay="true"
       id="chartSpinner"
       class="gt-chart-panel">
  </div>
  <div class="gt-chart-panel">
    <!-- negative positions are so that overlay will cover chart legend which sometimes stick beyond container -->
    <div class="gt-panel-overlay"
         ng-if="showChartSpinner"
         style="right: -20px; bottom: -20px;">
    </div>
  </div>
  <div class="gt-chart-dimensions" id="chart"></div>
  <div ng-if="chartNoData && !showChartSpinner"
       class="gt-chart-panel"
       style="display: table;">
    <div style="display: table-cell; text-align: center; vertical-align: middle;">
      <div class="gt-chart-no-data"
           ng-hide="showExpiredMessage">
        No data
      </div>
      <div class="gt-chart-no-data"
           ng-if="showExpiredMessage">
        *There were traces but they have expired
      </div>
    </div>
  </div>
</div>
<div class="row"
     ng-if="chartLimitExceeded">
  <div class="offset-xl-4 col-xl-8 mt-4">
    <div class="gt-chart-warning">
      Specified limit exceeded, only displaying slowest {{chartLimit}} matching traces
    </div>
  </div>
</div>
<div ng-form="formCtrl"
     gt-form-with-primary-button
     class="mt-4">
  <div class="form-group row">
    <label class="col-xl-4 gt-form-label-xl"
           for="{{filterDurationComparator !== 'less' ? 'filterDurationMillisLow' : 'filterDurationMillisHigh'}}">
      Response time
    </label>
    <div class="col-xl-8">
      <!-- input-group needs to be in a sub-div so it doesn't try to fill the entire width,
           which would push the addon "milliseconds" label flush right -->
      <div class="input-group"
           style="width: 100%;"
           ng-style="{'max-width': filterDurationComparator === 'between' ? '30em' : '25em'}">
        <div gt-input-group-dropdown
             class="input-group-prepend"
             gt-model="filterDurationComparator"
             gt-items="filterDurationComparatorOptions">
        </div>
        <input type="text"
               ng-model="filter.durationMillisLow"
               ng-if="filterDurationComparator !== 'less'"
               ng-pattern="/^(0|[1-9][0-9]*)$/"
               class="form-control"
               id="filterDurationMillisLow"
               name="filterDurationMillisLow"
               data-lpignore="true">
        <span ng-if="filterDurationComparator === 'between'"
              class="input-group-append"
              style="border-left-width: 0; border-right-width: 0;">
                <span class="input-group-text border-right-0">and</span>
              </span>
        <input type="text"
               ng-model="filter.durationMillisHigh"
               ng-if="filterDurationComparator !== 'greater'"
               ng-pattern="/^(0|[1-9][0-9]*)$/"
               class="form-control"
               id="filterDurationMillisHigh"
               name="filterDurationMillisHigh">
        <div class="input-group-append">
          <span class="input-group-text">milliseconds</span>
        </div>
        <div class="gt-invalid-other-feedback">
          This is invalid.
        </div>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-xl-4 gt-form-label-xl"
           for="searchHeadline">
      Headline/URL
    </label>
    <div class="col-xl-8">
      <div class="input-group"
           style="width: 100%; max-width: 25em;">
        <div gt-input-group-dropdown
             class="input-group-prepend"
             gt-model="filter.headlineComparator"
             gt-items="filterTextComparatorOptions">
        </div>
        <!-- id containing text "search" prevents lastpass from adding icon to input field -->
        <input type="text"
               ng-model="filter.headline"
               class="form-control"
               id="searchHeadline">
      </div>
    </div>
  </div>
  <div class="form-group row"
       ng-if="showErrorMessageFilter">
    <label class="col-xl-4 gt-form-label-xl"
           for="searchErrorMessage">
      Error
    </label>
    <div class="col-xl-8">
      <div class="input-group"
           style="width: 100%; max-width: 25em;">
        <div gt-input-group-dropdown
             class="input-group-prepend"
             gt-model="filter.errorMessageComparator"
             gt-items="filterTextComparatorOptions">
        </div>
        <!-- id containing text "search" prevents lastpass from adding icon to input field -->
        <input type="text"
               ng-model="filter.errorMessage"
               class="form-control"
               id="searchErrorMessage">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-xl-4 gt-form-label-xl"
           for="searchUser">
      User
    </label>
    <div class="col-xl-8">
      <div class="input-group"
           style="width: 100%; max-width: 25em;">
        <div gt-input-group-dropdown
             class="input-group-prepend"
             gt-model="filter.userComparator"
             gt-items="filterTextComparatorOptions">
        </div>
        <!-- id containing text "search" prevents lastpass from adding icon to input field -->
        <input type="text"
               ng-model="filter.user"
               class="form-control"
               id="searchUser">
      </div>
    </div>
  </div>
  <div class="form-group row" ng-if="traceAttributeNames.length">
    <label class="col-xl-4 gt-form-label-xl"
           for="searchAttributeName">
      Attribute name
    </label>
    <div class="col-xl-8">
      <select ng-model="filter.attributeName"
              class="custom-select"
              id="searchAttributeName"
              style="width: 100%; max-width: 25em;">
        <option value=""></option>
        <option ng-repeat="attributeName in traceAttributeNames"
                ng-value="attributeName">
          {{attributeName}}
        </option>
      </select>
    </div>
  </div>
  <div class="form-group row" ng-if="traceAttributeNames.length">
    <label class="col-xl-4 gt-form-label-xl"
           for="searchAttributeValue">
      Attribute value
    </label>
    <div class="col-xl-8">
      <div class="input-group"
           style="width: 100%; max-width: 25em;">
        <div gt-input-group-dropdown
             class="input-group-prepend"
             gt-model="filter.attributeValueComparator"
             gt-items="filterTextComparatorOptions">
        </div>
        <!-- id containing text "search" prevents lastpass from adding icon to input field -->
        <input type="text"
               ng-model="filter.attributeValue"
               class="form-control"
               id="searchAttributeValue">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-xl-4 gt-form-label-xl"
           for="searchLimit">
      Result limit
    </label>
    <div class="col-xl-8">
      <select ng-model="filter.limit"
              ng-options="option.value as option.text for option in filterLimitOptions"
              class="custom-select"
              id="searchLimit"
              style="width: 100%; max-width: 8em;">
      </select>
    </div>
  </div>
  <div class="form-group row pt-3 pt-xl-0">
    <div class="offset-xl-4 col-xl-8">
      <div gt-button-group>
        <div gt-button
             gt-label="Refresh"
             gt-click="refresh(deferred)"
             gt-validate-form="formCtrl"
             class="d-inline-block">
        </div>
        <button class="btn btn-secondary gt-button-spacing"
                ng-click="clearCriteria()">
          Clear criteria
        </button>
      </div>
    </div>
  </div>
</div>
<!-- escape key doesn't close modal in some situations without tabindex="-1"
     in particular, open trace modal, expand trace entries, then expand a concatenated span (one with ...)
     then hit escape key and modal doesn't close (at least not in chrome) -->
<div class="modal gt-full-width-modal gt-full-height-modal"
     role="dialog"
     tabindex="-1"
     id="traceModal">
  <div class="modal-dialog modal-dialog-centered"
       role="document">
    <div class="modal-content">
      <div class="gt-close-sticky">
        <!-- enclosing div is needed so that button clickable space doesn't consume entire page width -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>
<div class="gt-trace-point-normal gt-offscreen" id="offscreenNormalColor"></div>
<div class="gt-trace-point-error gt-offscreen" id="offscreenErrorColor"></div>
<div class="gt-trace-point-active gt-offscreen" id="offscreenActiveColor"></div>
